<template>
  <div class="form_div">
    <h1 style="text-align: center;margin-bottom: 10px">报名表单</h1>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" style="width: 200px"/>
      </el-form-item>

      <el-form-item label="所在学校">
        <el-select v-model="form.school" placeholder="请选择学校" style="width: 200px">
          <el-option
              v-for="item in schoolList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="学号">
        <el-input v-model="form.studentNumber" style="width: 200px"/>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio value="NanSheng">男生</el-radio>
          <el-radio value="NuSheng">女生</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="form.phoneNumber" style="width: 200px"/>
      </el-form-item>
      <el-form-item label="作品名称">
        <el-input v-model="form.titleoTheWork" style="width: 200px"/>
      </el-form-item>
      <el-form-item label="指导老师">
        <el-input v-model="form.teacher" style="width: 200px"/>
      </el-form-item>

    </el-form>
    <el-button type="primary" @click="onSubmit" style="margin-left:15px ">提交</el-button>
    <el-button @click="onCancel" style="float: right;margin-right: 15px">取消</el-button>
  </div>

</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {ajaxUpload} from "element-plus/es/components/upload/src/ajax";
import axios from 'axios'  // 引入 axios
import { ElMessage } from 'element-plus'  // 引入消息提示

interface RegistrationForm {
  name: string
  school: string
  studentNumber: string
  sex: string
  phoneNumber: string
  titleoTheWork: string
  teacher?: string  // 添加指导老师字段（注意模板中绑定的字段名需要修正）
}
const form = reactive({
  name: '',
  school: '',
  studentNumber: '',
  sex: '',
  phoneNumber: '',
  titleoTheWork: '',
  teacher: ''

})

const schoolList = [
  {
    value: 'beijing',
    label: '云南能源职业技术学院',
  },
  {
    value: 'tianjin',
    label: '云南农业职业技术学院',
  },
  {
    value: 'shanghai',
    label: '云南交通职业技术学院',
  },
  {
    value: 'dehong',
    label: '德宏职业技术学院',

  }
]


console.log(form)

const loading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')



async function onSubmit() {
  try {
    // 简单前端验证
    if (!form.name.trim()) {
      ElMessage.warning('请输入姓名')
      return
    }
    if (!form.phoneNumber.match(/^1[3-9]\d{9}$/)) {
      ElMessage.warning('请输入有效的手机号')
      return
    }

    loading.value = true
    errorMessage.value = ''
    successMessage.value = ''

    // 发送 POST 请求
    const response = await axios.post('http://localhost:8080/api/baoming', form)


    if (response.status === 200) {
      successMessage.value = '提交成功！'
      ElMessage.success('提交成功！')
    } else {
      errorMessage.value = '提交失败，请稍后再试。'
      ElMessage.error('提交失败，请稍后再试。')
    }
  } catch (error) {
    errorMessage.value = '提交失败，请稍后再试。'
    ElMessage.error('提交失败，请稍后再试。')
  }
  loading.value = false;
}
function onCancel() {
  //清楚表单数据
  Object.keys(form).forEach(key => {
    form[key] = '';
  })
}
</script>

<style scoped>
.form_div {
  transform: translateX(50%);
  border: 2px solid #d50909;
  padding: 5px;
  width: 300px;
}

</style>